<template>
  <vue-flv-player
    class="video"
    :autoplay="true"
    :controls="controls"
    :muted="true"
    ref="myPlayer"
    type="flv"
    :source="videoUrl"
  />
</template>

<script>
import { videoStream, videoKeep } from "@/api";
export default {
  name: "PlayerCamera",
  props: {
    cameraId: {
      type: Number | String,
      default: "",
    },
    controls: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      videoUrl: "",
    };
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  watch: {
    cameraId: {
      handler(n, o) {
        if (!n) return;
        videoStream({
          ids: [n],
        }).then((res) => {
          this.videoUrl = `${window.location.protocol}//${window.location.hostname}:81${res.data[0].source}`;
          this.keepStream();
        });
      },
      immediate: true,
    },
  },
  methods: {
    keepStream() {
      clearTimeout(this.timer);
      if (!this.cameraId) return;
      videoKeep({
        ids: [this.cameraId],
      });
      setTimeout(() => {
        this.keepStream();
      }, 150000);
    },
  },
};
</script>

<style lang="scss" scoped></style>
